<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>沐芃科技</title>
    <link rel="stylesheet" href="../../css/sign.css">
    <style>
        html,
        body {
            background: transparent;
        }

        .imgBox {
		width: 70%;
		height: 370px;
		/* background-color: antiquewhite; */
		position: absolute;
		left: 50%;
		top: -20px;
		transform: translate(-50%, 50%);
		z-index: 99;
	}
    .flex_column_around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.flex_column {
    display: flex;
    flex-direction: column;
}
.flex_around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex_column_center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
	.close {
		width: 25px;
		height: 25px;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.imgBox .tan {
		width: 100%;
		height: 90%;
	}

	.head {
		width: 70%;
		height: 70px;
		color: #FFFFFF;
		font-size: 15px;
		/* background-color: aquamarine; */
		position: absolute;
		left: 10px;
		top: 40px;

	}

	.bott {
		width: calc(86% - 17px);
		height: 170px;
		background-color: #FFFFFF;
		border-radius: 10px;
		color: #AA96B8;
		font-size: 7px;
		position: absolute;
		left: 2px;
		bottom: 40px;
		padding: 20px 8px;
	}

	.oneTop {
		width: 100%;
		height: 55px;
		/* background-color: #AA96B8; */
	}

	.oneTops {
		width: 100%;
		height: 74px;
		/* background-color: #AA96B8; */
		margin-top: 10px;
	}

	.oneTop .one {
		width: 41px;
		height: 100%;
		background-color: #F6F6F8;
		border-radius: 5px;
        position: relative;
	}
    .oneTop .one p{
        display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    }
	.today {
		width: 100%;
		height: 16px;
		/* background-color: #AA96B8; */
		/* 	line-height: 16px;
		background-color: #F472A3;
		border-radius: 3px;
		font-size: 7px;
		color: #FFF;
			text-align: center; */
		position: absolute;
		left: 0;
		top: -16px;
	}

	.today .banner {
		width: 100%;
		height: 16px;
	}

	.oneTops .ones {
		width: 55px;
		height: 100%;
		background-color: #F2EBFF;
		border-radius: 5px;
		font-size: 10px;
	}

	.oneTop .one .zuan {
		width: 20px;
		height: 15px;
		margin: 3px 0;
	}

	.oneTops .ones img {
		width: 26px;
		height: 20px;
		margin: 5px 0;
	}

	.btn {
		font-size: 17px;
		color: #FFFFFF;
		padding: 5px 51px;
		background: #f672b1;
		border-radius: 20px;
		margin: 10px auto 0;
	}
    .success{
        background: #D3D0D7;
    }
    .one .active{
		background-color: #f1f1f1;
	}
	.one .imgactive{
		position: absolute;
		right: -5px;
		top: -5px;
		width: 12px;
		height: 12px;
	}
    </style>
</head>

<body>
    <div id="view" v-cloak class="new-sign">
        <div class="modal-bg " onclick="_close()">




            <div class="imgBox">
				<img src="../../image/img/tan.png" alt="" class="tan">

				<div class="head flex_column_around">
					<p>每日签到</p>
					<p style="font-size: 10px;">已连续签到 {{ffInfo.tianshu}} 天奖励</p>
				</div>

				<div class="bott flex_column">
					<div class="oneTop flex_around">
						<div class="one flex_column_center" :class="{'active':m.is_sign==1}" v-for="(m, index) in ffInfo.data" v-if="index<4">
							<span>第{{index+1}}天</span>
							<img src="../../image/img/zuan.png" alt="" class="zuan">
							<span>+{{m.money}}</span>
                            <img src="../../image/task/yqd.png" v-if="m.is_sign==1 && ffInfo.tianshu>0" class="imgactive">
						<div v-if="ffInfo.tianshu ==index && ffInfo.tianshu>0" style="position: absolute;top: -10px;width:100%;height: 16px;">
							<img src="../../image/img/tomorrow.png" alt="" width="100%" height="16px">
						</div>
						</div>
						
					</div>

					<div class="oneTops flex_around">
						<div class="ones flex_column_center" :class="{'active':m.is_sign==1}" v-for="(m, index) in ffInfo.data" v-if="index>3">
							<span>第{{index+1}}天</span>
							<img src="../../image/img/zuan.png" alt="" class="zuan">
							<span>+{{m.money}}</span>
						</div>
						
					</div>

					<div class="btn" :class="{'success':ffInfo.is_sign==1}" onclick="submit()">
						{{ffInfo.is_sign?'今日已签到':'立即签到'}}
					</div>

				</div>

				<img src="../../image/img/close.png" alt="" class="close">

			</div>



        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../json/sign.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架

            signModal: false,
            sMsg: ''
        },
        methods: {
            // 跳转
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
        }
    })
    apiready = function() {
        getData()
    }
    // 获取签到记录
    function getData() {
        _ajax('api/task/qiandaorecords', function(ret, err) {
            if (ret && ret.code == 200) {
                view.ffInfo = ret.data;
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }

    function _close() {
        api.closeFrame();
    }

    // 签到
    function submit() {
        if (view.ffInfo.is_sign == 1) return;
        _loading();
        _ajax('api/task/qiandaoAjax', function(ret, err) {
            _loadingClose();
            if (ret.code == 200) {
                for (var i = 0, len = view.ffInfo.data.length; i < len; i++) {
                    if (view.ffInfo.data[i].is_sign != 1) {
                        view.ffInfo.data[i].is_sign = 1;
                        break;
                    }
                }
                view.ffInfo.is_sign = 1;
                view.signModal = true;
                view.ffInfo.tianshu++;
                _msg("签到成功");
            } else {
                _msg(ret.msg);
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }
</script>

</html>